/*
* @Author: lenovo
* @Date:   2017-11-16 18:40:27
* @Last Modified by:   lenovo
* @Last Modified time: 2017-11-30 13:53:17
*/
require('./index.css');
var page = {
			// 获取包裹所有item的父容器
	getMeiWenWrap : document.querySelector("#mei-wen-wrap"), 
			// 获取加载下一屏按钮 
	getBtnLoadNext : document.querySelector('#loadNext'),
			// 获取添加自己内容的按钮 
	getBtnAdd : document.querySelector('#addMy'),
			// 获取所有要删除的按钮
	getDelPanelBtns:document.getElementsByClassName('del'),
	// getAlterPanelBtns:document.getElementsByClassName('alter'),
	getSubmitBtn:document.querySelector("#complish"),
	getOperateWrap:document.querySelectorAll('.operate')[0],
	toIndex:document.querySelector('#toIndex'),
	getItemWrap:document.getElementsByClassName('mei-wen-item'),
	getDescP:document.getElementsByClassName('mei-wen-desc')[0],
	getPanelBodyDiv:document.getElementsByClassName('panel-body')[0],
	model:document.getElementsByClassName('mei-wen-item')[0],
	getSaveBtn:document.getElementsByClassName('save')[0],
	getWrap:document.getElementsByClassName('wrap')[0],
	getCssFloatA:document.getElementsByClassName('css-float')[0],
	getBtnLoadPre:document.getElementById("loadPre"),
	getPanel:document.getElementsByClassName("panel")[0],
	flag:null,//表示是编辑后的保存，还是用户添加自己的内容后保存
	num:0,
	//counterObject:0,  // 存储对象个数
	data:[  //数组对象
		{
			heading:'1橘子',
			desc:'这是第1个橘子的内容'
		},
		{
			heading:'2橘子',
			desc:'这是第2个橘子的内容'
		},
		{
			heading:'3橘子',
			desc:'这是第3个橘子的内容'
		},
		{
			heading:'4橘子',
			desc:'这是第4个橘子的内容'
		},
		{
			heading:'5橘子',
			desc:'这是第5个橘子的内容'
		}
	],
	panelNum:5,
	init: function (){
		//获得所有数据，
		HTMLCollection.prototype.toArray=function(){
                return [].slice.call(this);
        };
        // alert(this.getOperateWrap.offsetWidth);
        this.getMeiWenWrap.style.width = document.getElementsByClassName('row')[0].offsetWidth*0.7 + 'px';
        this.getMeiWenWrap.style.margin = "0 auto";
		this.getOperateWrap.style.width=350+'px';
		this.getWrap.style.width=this.getPanelBodyDiv.offsetWidth+12+'px';
		// alert(this.getWrap.offsetWidth);
		this.bindEvent();
	},
	bindEvent: function (){
		this.loadData(false);
		var _this = this;
		 //点击加载下一屏
		this.getBtnLoadNext.addEventListener('click',this.loadNext.bind(this));
		//加载上一屏
		this.getBtnLoadPre.addEventListener("click",this.loadPre.bind(this));
		//点击添加自己的内容
		this.getBtnAdd.addEventListener('click',this.addMy.bind(this));
		this.getDelPanelBtns.toArray().forEach(function(curr,index){
			curr.addEventListener('click',function(){
				_this.delPanel(curr,index);
			})
		});
		// 要修改内容，首先传进去当前点击的btn对象，
		// 根据这个找到panel的header和body，然后设置他的属性contentEditable="true"，就可以实现编辑功能
		
		this.getSubmitBtn.addEventListener('click',this.submitCon.bind(this));
		// 点击添加自己的内容
		// 跳转回主页
		this.toIndex.addEventListener('click',this.returnIndex);
		this.getDescP.addEventListener('blur',function(){
			if(!this.innerHTML){
				alert("请输入内容~");
			}else{
				this.style.border=null;
				this.contentEditable=false;
				this.innerHTML=_this.getDescP.innerHTML;
			}
		});
		this.getPanelBodyDiv.addEventListener('blur',function(){
			if(!this.innerHTML){
				alert("请输入内容~");
			}else{
				this.style.border=null;
				this.contentEditable=false;
				this.innerHTML=_this.getPanelBodyDiv.innerHTML;
			}
		});
		this.getPanel.addEventListener('mousemove',function(e){
			_this.panelMouseOver(e);
		});
	},
	panelMouseOver:function(event){
		var e=event||window.event;
		var divTop=this.getPanel.offsetTop;
		var divLeft=this.getPanel.offsetLeft;
		var divWidth=this.getPanel.offsetWidth;
		var divHeight=this.getPanel.offsetHeight;
		var distance = 50;
  		var rotationMultiple = 0.1;
		if(e.clientX<divWidth/2&& e.clientY>divHeight/2||e.clientX>divWidth/2&&e.clientY>divHeight/2){
			 var pctX =(((e.clientX - divLeft)/ divWidth) - 0.5);
      		 var pctY = -(((e.clientY - divTop)/ divHeight) - 0.3);
      		 this.animate(pctX, pctY, rotationMultiple, distance);
   		 }
    		if(e.clientX < divWidth/2 && e.clientY < divHeight/2 || e.clientX > divWidth/2 && e.clientY < divHeight/2) {
     		 // 1.2
      		var pctX =((e.clientX - divLeft)/ divWidth) - 0.7;
      		var pctY = ((e.clientY - divTop)/ divHeight) - 0.5;
      		this.animate(pctX, pctY, rotationMultiple, distance);
    		}
	},
	animate:function(pctX, pctY, rotationMultiple, distance) {
    	var rotateX = pctY * rotationMultiple * -180;
    	var rotateY = pctX * rotationMultiple * 180;
    	this.getPanel.style.transform = ' rotateX(' + rotateX + 'deg' + ')' + ' rotateY(' + rotateY + 'deg'+ ')';
	},
	saveData:function(){
		this.getDescP.contentEditable=false;
		this.getPanelBodyDiv.contentEditable=false;
		// alert(this.getDescP.contentEditable);
		this.getDescP.style.border = '';
		this.getDescP.style.width = 'auto';
		this.getPanelBodyDiv.style.border = '';
		this.getPanelBodyDiv.style.width = 'auto';
	},
	loadData:function(para){
		// this.getItemWrap[1].style.transform="rotateY(0deg)";
		if(!para){ // 说明是初始化，不用创建item
			this.getDescP.innerHTML = this.data[0].heading;
			this.getPanelBodyDiv.innerHTML = this.data[0].desc;
		} else{
			// 说明点击了下一屏，重新创建显示内容。
			if(this.num){
				this.getDescP.innerHTML= this.data[this.num].heading;
				this.getPanelBodyDiv.innerHTML= this.data[this.num].desc;
			}
		}
	},
	returnIndex:function(){
		window.location.href='./index.html';
	},
	submitCon:function(){
		// 获取所有的数据，点击提交
		if(confirm("确认提交吗？")){
			this.saveData();
		}
	},
	delPanel:function(obj,para){
		//获取到要删除的item盒子
		var getItem = obj.parentNode.parentNode.parentNode.parentNode;
		this.getMeiWenWrap.removeChild(getItem);
	},
	loadNext: function(){
		this.num+=1;
		// alert(this.num>this.data.length);
		if(this.num>this.data.length){
			this.num=0;
			this.loadData(false);
		}
		this.loadData(true);
	},
	loadPre:function(){
		// this.num-=1;
		if(this.num-1>=0){
			this.num-=1;
			this.loadData(true);
		}
		if(this.num-1==-1){
			this.num=0;
			this.loadData(false);
		}
	},
	addMy: function(){
		// 其实就是向data添加数据，并立即显示在页面 即获取用户输入，存入
		//清空内容，用户添加自己的内容
		// 点击完成按钮，保存，此时num+1；表示数据多了一条
		this.getDescP.innerHTML = '';
		this.getPanelBodyDiv.innerHTML = '';
		this.getDescP.style.border = '1px solid rgba(0,0,0,.4)';
		this.getDescP.style.width = 200+'px';
		this.getDescP.style.height = 40+'px';
		// this.getDescP.style.overflow = 'scroll';
		this.getDescP.contentEditable = true;
		this.getPanelBodyDiv.contentEditable = true;
		this.getPanelBodyDiv.style.border = '1px solid rgba(0,0,0,.4)';
		this.num+=1;
	}
};
(function(){
	page.init();
})();
